package com.neptune.imapp.ui.compose.screen.frontPage.help

import android.content.res.Configuration.UI_MODE_NIGHT_NO
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.neptune.imapp.R
import com.neptune.imapp.ui.compose.navigation.RouterConfig
import com.neptune.imapp.ui.compose.screen.frontPage.FrontPageViewModel
import com.neptune.imapp.ui.compose.screen.frontPage.login.InputTextField
import com.neptune.imapp.ui.compose.screen.frontPage.login.autoCloseKeyboard
import com.neptune.imapp.ui.theme.AppTheme
import com.neptune.imapp.utils.RegexUtil

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun Help(viewModel: FrontPageViewModel, navController: NavController) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val focusManager = LocalFocusManager.current
    Column(
        modifier = Modifier
            .autoCloseKeyboard(keyboardController, focusManager)
            .fillMaxHeight()
            .padding(start = 20.dp, end = 20.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            text = "Forget Password",
            fontSize = 30.sp,
            fontFamily = FontFamily.Cursive,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 50.dp),
            letterSpacing = 8.sp
        )
        HelpForm(viewModel = viewModel, navController = navController)
    }
}

@Composable
fun HelpForm(viewModel: FrontPageViewModel, navController: NavController) {
    val isClickAble = remember {
        mutableStateOf(false)
    }
    val captcha = remember {
        mutableStateOf(false)
    }
    InputTextField(
        bindValue = viewModel.phoneVal,
        label = "PhoneNumber",
        placeholder = "Please Input your Phone",
        trailingIcon = {
            IconButton(
                content = {
                    Icon(
                        painter = painterResource(R.drawable.ic_delete),
                        contentDescription = null
                    )
                },
                enabled = viewModel.phoneVal.value.isNotEmpty(),
                onClick = {
                    viewModel.clearString(viewModel.phoneVal)
                }
            )
        },
        modifier = Modifier
            .onFocusChanged {
                viewModel.isPhoneError.value = RegexUtil.checkPhoneNumber(viewModel.phoneVal)
            }
            .fillMaxWidth()
            .wrapContentHeight(),
        isError = viewModel.isPhoneError.value,
        imeAction = ImeAction.Next
    )
    InputTextField(
        bindValue = viewModel.captcha,
        label = "Captcha",
        placeholder = "Input Captcha",
        modifier = Modifier
            .fillMaxWidth(),
        trailingIcon = {
            Button(
                content = {
                    Text(text = "Get")
                },
                enabled = isClickAble.value,
                onClick = {
                    if (viewModel.phoneVal.value.isEmpty()) {
                        isClickAble.value = false
                    }

                },
                shape = CutCornerShape(30),
            )
        },
        imeAction = ImeAction.Done
    )

    AnimatedVisibility(visible = captcha.value) {
        InputTextField(
            bindValue = viewModel.passwordVal,
            label = "Password",
            placeholder = "Please Input your Password",
            leadingIcon = {
                IconButton(
                    content = {
                        Icon(
                            painter = painterResource(if (viewModel.passwordVisibility.value) R.drawable.ic_invisible else R.drawable.ic_visible),
                            contentDescription = null
                        )
                    },
                    onClick = {
                        viewModel.passwordInputClick()
                    }
                )
            },
            trailingIcon = {
                IconButton(
                    content = {
                        Icon(
                            painter = painterResource(R.drawable.ic_delete),
                            contentDescription = null
                        )
                    },
                    enabled = viewModel.passwordVal.value.isNotEmpty(),
                    onClick = {
                        viewModel.clearString(viewModel.passwordVal)
                    }
                )
            },
            modifier = Modifier
                .fillMaxWidth(),
            visualTransformation = if (viewModel.passwordVisibility.value) PasswordVisualTransformation() else VisualTransformation.None,
            keyboardActions = KeyboardActions.Default, imeAction = ImeAction.Done
        )
    }
    AnimatedVisibility(visible = captcha.value) {
        InputTextField(
            bindValue = viewModel.repeatPassword,
            label = "Repeat Password",
            placeholder = "Please Input your Password",
            trailingIcon = {
                IconButton(
                    content = {
                        Icon(
                            painter = painterResource(R.drawable.ic_delete),
                            contentDescription = null
                        )
                    },
                    enabled = viewModel.passwordVal.value.isNotEmpty(),
                    onClick = {
                        viewModel.clearString(viewModel.repeatPassword)
                    }
                )
            },
            modifier = Modifier
                .fillMaxWidth(),
            visualTransformation = if (viewModel.passwordVisibility.value) PasswordVisualTransformation() else VisualTransformation.None,
            keyboardActions = KeyboardActions(onDone = {
//                        localFocusManager.clearFocus()
//                        focusRequester.requestFocus()
            }), imeAction = ImeAction.Done
        )
    }
    Button(
        onClick = {
            if (!captcha.value) {
                if (viewModel.captcha.value == "1234") {
                    captcha.value = true
                }
            } else {
                navController.navigate(RouterConfig.ROUTE_Login)
            }
        },
        shape = RoundedCornerShape(5.dp)
    ) {
        Text(if (captcha.value) "修改密码" else "下一步")
    }
}

@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_NO)
@Composable
fun HelpDayLight() {
    AppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Help(viewModel = FrontPageViewModel(), navController = rememberNavController())
        }
    }
}

@Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
@Composable
fun HelpNight() {
    AppTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            Help(viewModel = FrontPageViewModel(), navController = rememberNavController())
        }
    }
}